<template>
  <uni-popup ref="bindWxPopup" type="center" :mask-click="false">
    <view class="container flex-col">
      <image class="bg" src="@/static/bindWx/bg.png"/>
      <view class="flex-col inner-container align-center">
        <view class="btn-container center s" @click="bindWx('weixin')">绑定微信</view>
        <view class="btn-container center n" @click="close">稍后再说</view>
        <view class="desc">如遇问题，请添加客服：{{ settings && settings.kefuPhone ? settings.kefuPhone : '' }}</view>
      </view>
    </view>
    <CheckBindMergeDialog ref="CheckBindMergeDialog"></CheckBindMergeDialog>
  </uni-popup>
</template>

<script>

import {mapGetters, mapActions} from 'vuex'
import {commonApi} from "../api";
import CheckBindMergeDialog from "./CheckBindMergeDialog";

export default {
  name: "BindWxDialog",
  components: {CheckBindMergeDialog},
  computed: {
    ...mapGetters(['settings'])
  },
  data() {
    return {}
  },
  methods: {
    ...mapActions(['refreshUser']),
    open() {
      this.$refs.bindWxPopup.open()
    },
    close() {
      this.$refs.bindWxPopup.close()
    },
    bindWx(provider) {
      uni.login({
        provider,
        success: async (res2) => {
          try {
            uni.showLoading({
              title: '加载中...',
            })
            let authResult = res2.authResult;
            const res = await commonApi.checkBound(provider, authResult)
            if (res.data.data) {
              uni.hideLoading()

              await this.$refs.CheckBindMergeDialog.open('wx')
              uni.showLoading({
                title: '加载中...',
              })
              await commonApi.bindMerge(provider, authResult)
              await this.$refs.CheckBindMergeDialog.close()
              uni.hideLoading()
            } else {
              await commonApi.bindMerge(provider, authResult)
            }
            uni.showToast({
              title: '绑定成功！',
              icon: 'none',
              duration: 2000
            });
            await this.refreshUser()
            this.close()
          } catch (e) {
            if (e && e.data && e.data.msg) {
              uni.showToast({
                title: e.data.msg,
                icon: 'none',
                duration: 2000
              });
            }
          }
          uni.hideLoading()
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  width: 650upx;
  height: 662upx;

  .bg {
    width: 650upx;
    height: 662upx;
  }

  .inner-container {
    position: absolute;
    bottom: 0;
    width: 100%;

    .btn-container {
      margin-top: 31upx;
      width: 568upx;
      height: 112upx;
      border-radius: 56upx;
      font-size: 32upx;

      &.s {
        background: #06E06E;
        font-family: SourceHanSansCN-Bold;
        color: #FFFFFF;
        font-weight: 700;
      }

      &.n {
        background: #EEEEEE;
        font-family: SourceHanSansCN-Medium;
        color: #626161;
        font-weight: 500;
      }
    }

    .desc {
      margin-top: 43upx;
      margin-bottom: 46upx;
      font-family: SourceHanSansCN-Regular;
      font-size: 24upx;
      color: #989898;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
}
</style>
